export default `<template>
  <div class="map-box">
    <div class="map" id="map"></div>
    <div class="btns-box">
      <el-button type="primary" size="small" @click="drawTrack">画轨迹</el-button>
      <el-button type="primary" size="small" @click="revokeLastStep">撤销上一步</el-button>
      <el-button type="primary" size="small" @click="clearTrack">清除轨迹</el-button>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { Draw } from "ol/interaction";
import { Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import TileArcGISRest from "ol/source/TileArcGISRest";

import CONSTANT from "@/config/constant.js";

export default {
  name: "revokeTrajectory",

  data() {
    return {
      map: null,
      drawVector: null,
      drawObj: null
    };
  },

  methods: {
    init() {
      //初始化地图
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new TileArcGISRest({
              url: CONSTANT.GIS_URL
            })
          })
        ],
        target: "map",
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });

      this.initDraw();
    },

    initDraw() {
      this.drawVector = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)"
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33"
            })
          })
        })
      });

      this.map.addLayer(this.drawVector);

      this.drawObj = new Draw({
        source: this.drawVector.getSource(),
        type: "LineString"
      });

      
    },

    //绘画轨迹
    drawTrack() {
      this.map.addInteraction(this.drawObj);
       this.drawObj.on(
        "drawend",
        () => {
          this.map.removeInteraction(this.drawObj);
        },
        this
      );
    },

    //撤销上一步 (按钮控制)
    revokeLastStep() {
      this.drawObj && this.drawObj.removeLastPoint();
    },


    //清除轨迹
    clearTrack(){
        this.drawVector.getSource().clear()
    }
  },

  mounted() {
    this.init();
    //通过键盘删除键来控制，撤销上一步
    document.addEventListener('keyup',(e)=>{
        if(e.keyCode == 46){
            this.revokeLastStep()
        }
    })
  }
};
</script>

<style lang="less" scoped>
.map-box {
  height: 100%;
  position: relative;
  .map {
    height: 100%;
  }
  .btns-box {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
</style>
`